{% extends "dashboard/base.html" %}
{% load materializecss %}
{% load i18n %}
{% load mptt_tags %}
{% load staticfiles %}

{% block title %}
  {% trans "Shipping methods" context "Dashboard shipping methods" %}
  {% if shipping_method.pk %}
    - {{ shipping_method }}
  {% else %}
    - {% trans "Add new method" context "Shipping method form page title" %}
  {% endif %}
  - {{ block.super }}
{% endblock %}

{% block body_class %}body-shipping-methods{% endblock %}

{% block menu_delivery_class %}active{% endblock %}

{% block page_title %}
  {% if shipping_method.pk %}
    {{ shipping_method }}
  {% else %}
    {% trans "Add new method" context "Shipping method form page title" %}
  {% endif %}
{% endblock %}

{% block breadcrumbs %}
  <ul class="breadcrumbs breadcrumbs--history">
    <li>
      <a href="{% url 'dashboard:shipping-methods' %}">
        {% trans "Shipping methods" context "Dashboard shipping method" %}
      </a>
    </li>
    <li class="back-mobile">
      <a href="{% url 'dashboard:shipping-methods' %}">
        <svg data-src="{% static "dashboard/images/arrow_left.svg" %}" fill="#fff" width="20px" height="20px" />
      </a>
    </li>
    <li>
      {% if shipping_method.pk %}
        <span class="breadcrumbs--ellipsed-item">
          {{ shipping_method }}
        </span>
      {% else %}
        <span class="breadcrumbs--ellipsed-item">
          {% trans "Add new method" context "Shipping method form breadcrumbs" %}
        </span>
      {% endif %}
    </li>
  </ul>
{% endblock %}

{% block header_extra %}
  {% if shipping_method.pk %}
    <a class="dropdown-button right" href="#" data-activates="context-menu" data-constrainwidth="false">
      <svg data-src="{% static "dashboard/images/more_vert.svg" %}" height="24" width="24" />
    </a>
    <ul id="context-menu" class="dropdown-content">
      <li>
        <a href="{% url 'dashboard:shipping-method-delete' pk=shipping_method.pk %}">
          {% trans "Delete shipping method" context "Shipping method form action" %}
        </a>
     </li>
    </ul>
  {% endif %}
{% endblock %}

{% block menu_shipping_class %} active{% endblock %}

{% block content %}
  <div class="row">
    <div class="col m12 l9">
      <div class="card">
        <form method="post" id="form-method">
          <div class="card-content">
            {% csrf_token %}
            {{ price_per_country_formset.management_form }}
            <div class="row">
              {{ shipping_method_form|materializecss }}
            </div>
            <h5 class="card-title">
              {% trans "Price per country" context "Shipping method form text" %}
            </h5>
          </div>
          <div class="formset-table-container">
            <table class="formset-table">
              <thead>
                <tr>
                  <th>
                    {% trans "Country" context "Shipping method country list" %}
                  </th>
                  <th>
                    {% trans "Price" context "Shipping method country list" %}
                  </th>
                  <th>
                    {% trans "Delete" context "Dashboard delete action" %}
                  </th>
                </tr>
              </thead>
              <tbody>
                {% for form in price_per_country_formset %}
                <tr>
                  <td>
                    {% for hidden in form.hidden_fields %}
                      {{ hidden }}
                    {% endfor %}
                    {{ form.country_code|materializecss:"input-field s12" }}
                    {% if form.non_field_errors %}
                      {% for error in form.non_field_errors %}
                        <p class="help-block materialize-red-text">{{ error }}</p>
                      {% endfor %}
                    {% endif %}
                  </td>
                  <td>
                    {{ form.price|materializecss }}
                  </td>
                  <td>
                    {{ form.DELETE|materializecss }}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          <div class="card-action right-align">
            {% if shipping_method.pk %}
              <a href="{% url 'dashboard:shipping-methods' %}" class="btn btn-flat">
                {% trans "Cancel" context "Dashboard cancel action" %}
              </a>
              <button type="submit" class="btn waves-effect waves-light">
                {% trans "Update" context "Dashboard update action" %}
              </button>
            {% else %}
              <a href="{% url 'dashboard:shipping-methods' %}" class="btn btn-flat">
                {% trans "Cancel" context "Dashboard cancel action" %}
              </a>
              <button type="submit" class="btn waves-effect waves-light">
                {% trans "Create" context "Dashboard create action" %}
              </button>
            {% endif %}
          </div>
        </form>
      </div>
    </div>
    <div class="col m12 l3 help-box"></div>
  </div>
{% endblock %}
